<template>
  <div class="CorporatePortrait clearfix w">
    <div class="f-left CP-left">
      <div class="Portrait tl">
        <i class="iconfont ent_qiye icon-qiye mr-10"></i>
        企业名片
      </div>
      <CompanyPortrait :data="HXdata"></CompanyPortrait>
    </div>
    <div class="f-right CP-right">
      <div class="introduction">
        <i class="iconfont ent_qiye_details icon-qiye1 mr-10"></i>
        企业简介
      </div>
      <!-- <p>{{ entinfo.introduction }}</p> -->
      <div class="chart clearfix">
        <div class="chart1 f-left">
          <div class="chart2">
            <div class="title mt-16">需求</div>
            <div class="count_num">
              {{ HXdata.materialDemandCnt ? HXdata.materialDemandCnt : "0" }}
            </div>
          </div>
        </div>
        <div class="chart3 f-left">
          <div class="chart4">
            <div class="title mt-16">供应</div>
            <div class="count_num">
              {{ HXdata.productSupplyCnt ? HXdata.productSupplyCnt : "0" }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanyPortrait } from "@/apis/com/company";
import CompanyPortrait from "@/views/components/CompanyPortrait.vue";

export default {
  components: {
    CompanyPortrait,
  },
  data() {
    return {
      entId: null,
      HXdata: {},
    };
  },
  created() {
    this.entId = this.$route.query.id;
    this.getEntHX();
  },
  methods: {
    // 获取  企业名片数据
    getEntHX() {
      getCompanyPortrait(this.entId)
        .then((res) => {
          if (res.code == 200) {
            this.HXdata = res.data;
          }
        })
        .catch((error) => {});
    },
    GetYear(val) {
      let _date = new Date(val);
      let _nowdate = new Date();
      let _years = _date.getFullYear();
      let _nowyears = _nowdate.getFullYear();
      return _nowyears - _years + "年";
    },
  },
};
</script>

<style lang="less" scoped>
.CorporatePortrait {
  height: 562px;
  background-color: #ffffff;
  box-shadow: 6px 6px 20px 0px rgba(24, 138, 241, 0.16);
  border-radius: 8px;
  margin-top: -60px;
  padding: 31px 32px;

  .CP-left {
    width: 658px;
    margin-right: 24px;
    text-align: center;

    .ent_pro {
      position: relative;
      height: 375px;

      .pro_num {
        position: absolute;
        font-family: Microsoft YaHei;
        font-size: 14px;
      }

      .esData {
        left: 310px;
        top: 0px;
        color: #0da9b0;
      }

      .regCap {
        left: 425px;
        top: 7px;
        color: #0da9b0;
      }

      .entChangeCnt {
        left: 465px;
        top: 56px;
        color: #0da9b0;
      }

      .productTag1 {
        left: 572px;
        top: 103px;
        color: #188af1;
      }

      .productTag2 {
        left: 615px;
        top: 138px;
        color: #188af1;
      }

      .productTag3 {
        left: 600px;
        top: 176px;
        color: #188af1;
      }

      .productTag4 {
        left: 536px;
        top: 207px;
        color: #188af1;
      }

      .materialsCnt {
        left: 532px;
        top: 262px;
        color: #ee6224;
      }

      .productInfoCnt {
        left: 546px;
        top: 314px;
        color: #ee6224;
      }

      .productSaleCnt {
        left: 486px;
        top: 349px;
        color: #ee6224;
      }

      .biddingCnt {
        left: 112px;
        top: 259px;
        color: #188af1;
      }

      .merchantsCnt {
        left: 112px;
        top: 222px;
        color: #188af1;
      }

      .entHonorCnt {
        left: 132px;
        top: 130px;
        color: #ff9f00;
      }

      .entCertCnt {
        left: 128px;
        top: 89px;
        color: #ff9f00;
      }

      img {
        // width:560px;
        height: 368px;
        object-fit: cover;
      }
    }

    .Portrait {
      font-size: @font18;
      padding-bottom: 14px;
      margin-bottom: 32px;
      color: @text-color-303;
      border-bottom: solid 1px #f5f7fa;

      .ent_qiye {
        font-size: 24px;
        color: #2a51bc;
      }
    }
  }

  .CP-right {
    width: 450px;

    .ent_qiye_details {
      font-size: 24px;
      color: #2a51bc;
    }

    .introduction {
      font-size: @font18;
      padding-bottom: 14px;
      margin-bottom: 32px;
      color: @text-color-303;
      border-bottom: solid 1px #f5f7fa;
    }

    p {
      font-family: Microsoft YaHei;
      font-size: @font16;
      font-weight: normal;
      line-height: 28px;
      color: @text-color-606;
      -webkit-line-clamp: 8; // 用来限制在一个块元素显示的文本的行数
      display: -webkit-box; // 将对象作为弹性伸缩盒模型显示
      -webkit-box-orient: vertical; //设置或检查伸缩盒对象的子元素的排列方式
      text-overflow: ellipsis; // 在多行文本的情况下，用...隐藏超出范围的文本
      word-break: break-all;
      overflow: hidden;
    }

    .chart {
      margin-top: 32px;
      width: 450px;
      height: 148px;
      background-color: #f5f7fa;
      border-radius: 4px;
      padding-top: 21px;

      .chart1 {
        width: 106px;
        height: 106px;
        margin: 0 40px 0 98px;
        border-radius: 50%;
        background-color: #b3d7f7;
        display: flex;
        justify-content: center;
        align-items: center;

        .chart2 {
          text-align: center;
          width: 88px;
          height: 88px;
          border-radius: 50%;
          background-color: @color-188;

          .title {
            font-size: 11px;
            color: #fff;
          }

          .count_num {
            color: #ffffff;
            font-size: 28px;
          }
        }
      }

      .chart3 {
        width: 106px;
        height: 106px;
        border-radius: 50%;
        background-color: #abdee3;
        display: flex;
        justify-content: center;
        align-items: center;

        .chart4 {
          text-align: center;
          width: 88px;
          height: 88px;
          border-radius: 50%;
          background-color: #0da9b0;

          .title {
            font-size: 11px;
            color: #fff;
          }

          .count_num {
            color: #ffffff;
            font-size: 28px;
          }
        }
      }
    }
  }
}
</style>
